<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<link rel="icon" href="./favicon.ico" />
	<title>快快数据查询统计平台</title>
	<script src="/common/js/vue.js" charset="utf-8"></script>
	<script src="/common/js/jquery.min.js" charset="utf-8"></script>
	<script src="/common/js/echarts.min.js" charset="utf-8"></script>
	<script src="/common/js/md5.js" charset="utf-8"></script>
	<script src="/common/js/vue-easytable.min.js" charset="utf-8"></script>
	<script src="/common/js/axios.min.js" charset="utf-8"></script>
	<script src="/common/js/rd.js" charset="utf-8"></script>
	<script src="chart/chart-options.js" charset="UTF-8"></script>
	<link rel="stylesheet" href="/common/css/vue-easytable.min.css">
	<link rel="stylesheet" type="text/css" href="/commoncss/normal.css">
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	<script src="js/index.js"></script>
	
</head>
<body>
	<div class="container">

		<header class="line" id="header_vm">
			<div class="line">
				<img src="kklogo0.png" style="width: 60px; width: 60px; margin: 0 10px 0 0; ">
				<div class="mainTitle">快快数据查询统计平台</div>
			</div>
			<div class="logininfo" v-show="showUserInfo">
				<span class="username">{{userlogin.user_name}}</span>
				<button class="changepassword" @click="navito('login', 'changepassword')">修改密码</button>
				<button class="logout" @click="logout()">退出登录</button>
			</div>
		</header>
		<article class="body line">
			<div class="nav" v-if="showMenu">
				<nav id="nav_vm">
					<div v-for="item in mainmenu" v-if="showMenu">
						<button :class="(item.type == 'dir' ? 'dir ': '') + (curdir == item.path && curpage == item.filename ? 'choosed' : '')" @click="clickMenuItem(item)">
							<span>{{item.type == 'dir' ? (item.status == 'open' ? '－ ' : '＋ ') : '　 '}}</span>{{item.name}}
						</button>
						<div v-if="item.type == 'dir' && item.status == 'open'" v-for="i in item.children">
							<button :class="'small ' + (curdir == i.path && curpage == i.filename ? 'choosed' : '')" @click="clickMenuItem(i)">{{i.name}}</button>
						</div>
					</div>
				</nav>
			</div>
			<div class="mainblock">
				<main></main>
			</div>
		</article>
	</div>
</body>
</html>

<script>
	var nav_vm = new Vue({
		el: '#nav_vm',
		data: {
			mainmenu: [
				{name: '门店查询', type: 'dir', status: 'open', children: [
					{name: '签约情况', type: 'page', path: 'gyms', filename: 'signup'},  // 二级选项: 当日,当月,当年,累计
					{name: '课程表', type: 'page', path: 'gyms', filename: 'timetable'},
				]},
	
				{name: '会员查询', type: 'dir', status: 'open', children: [
					{name: '综合查询', type: 'page', path: 'users', filename: 'searchusers'},
					{name: '教练私海', type: 'page', path: 'users', filename: 'userpool'},
					{name: 'top学员', type: 'page', path: 'users', filename: 'topusers'},
				]},
				
				{name: '统计图表', type: 'dir', status: 'open', children: [
					{name: '用户画像', type: 'page', path: 'charts', filename: 'users_chart'},
					{name: '约课情况', type: 'page', path: 'charts', filename: 'ty_classes'},
					{name: '转化续课', type: 'page', path: 'charts', filename: 'rates'},
					
				]},
				
				{name: '线上课', type: 'dir', status: 'open', children: [
					{name: '分时用户量', type: 'page', path: 'zhibo', filename: 'zhibo_users'},
					{name: '课程平均人数', type: 'page', path: 'zhibo', filename: 'zhibo_classes'}
				]}
				
				// {name: '查询表', type: 'dir', status: 'close', children: [
				// 	{name: 'sj', type: 'page', path: 'gyms', filename: 'sj'},
				// 	{name: 'tj', type: 'page', path: 'gyms', filename: 'tj'},
				// ]},
			],
			userlogin: {user_name: ""},
			showMenu: false,
			curdir: "",
			curpage: "",
		}, 
		methods: {
			clickMenuItem: function(item){ 
				
				if(this.curdir == item.path && this.curpage == item.filename) return;  // 点击相同的页面,不需要重复加载
				console.log(item.filename)
				if(item.type == 'page'){
					this.curdir = item.path
					this.curpage = item.filename;
					this.navito(item.path, item.filename);
				}else{
					if(item.status == 'open'){
						item.status = 'close'
					}else{
						item.status = 'open'
					}
				}
				
			},
			navito: function(path, filename){ navito(path, filename) }
		},
		mounted(){
	
		}
	})	
	
	var header_vm = new Vue({
		el: '#header_vm',
		data: {
			userlogin: {userName: ""},
			showUserInfo: false,
			isAdmin: false,
		},
		methods: {
			navito: function(path, filename){ navito(path, filename) },
			logout: function(){
				sessionStorage.removeItem('userlogin');
				this.showUserInfo = false;
				nav_vm.showMenu = false;
				nav_vm.curdir = "";
				nav_vm.curpage = ""
				this.navito('login', 'login');
			}
		},
		mounted(){
			// 未登录，则进入登录页，不需初始化Vue结构
			if(! sessionStorage["userlogin"]){ 
				nav_vm.showMenu = false;
				navito("login", "login");
			}else{
				nav_vm.showMenu = true;
				this.userlogin = JSON.parse(sessionStorage["userlogin"]);
				this.showUserInfo = true;
			}
		}
	})
</script>